<script lang="ts" setup>
import { cmsArticle, cmsRequirementRelease, cmsRequirementReleaseDetail } from '@/api'
import { Search, View, Opportunity } from '@element-plus/icons-vue'
import Create from './components/create.vue'
import Info from './components/info.vue'

interface IArticle {
  articleId: number
  articlePicture: string
  articleContent: string
}

interface IList {
  id: number
  coverPhoto: string
  requirementName: string
  province: string
  city: string
  area: string
  requirementArea: string
  requirementBudget: string
  requirementDescribe: string
  requirementCompletionTime: string
  hits: string
  scheme: string
  status: string
}
interface DictItem {
  siteCode: string
  dictionaryCode: string
  dictionaryName: string
}
const dictStore = useDictStore()
dictStore.fetchDictionary()
const createRef = ref()
const infoRef = ref()
const queryParams = reactive({
  status: [2, 3, 4],
  // status: 2,
  pageNum: 1, //当前页码
  pageSize: 10, //每页显示条数
  total: 0, //总条数
  requirementName: '' //需求名称
})
const list = ref<IList[]>([])
const article = ref<IArticle[]>([])

const stateOpt = computed(() => {
  return (dictStore.getDict as DictItem[])?.filter(
    (item: DictItem) => item.siteCode === 'JLY_REQUIREMENTSTATUS_CODE'
  )
})

// 创建需求
const createARequirement = () => {
  createRef.value.open()
}

// 搜索
const search = () => {
  queryParams.pageNum = 1
  getList()
}

// 获取需求列表
const getList = () => {
  cmsRequirementRelease(queryParams).then(({ data }) => {
    queryParams.total = data.total
    list.value = data.list
  })
}

// 修改分页
const currentChange = (val: any) => {
  queryParams.pageNum = val
  getList()
}

// 查看需求详情
const infoShow = (row: any) => {
  cmsRequirementReleaseDetail({ id: row.id }).then(({ data }) => {
    infoRef.value.open(data)
  })
}

// 根据传入时间获取剩余天数
const getLeftDay = (item: any) => {
  return {
    type: item.status == 3,
    text: stateOpt.value.find((ite: any) => ite.dictionaryCode == item.status)?.dictionaryName
  }
}

// 获取最新文章
const getCmsArticle = () => {
  cmsArticle({ articleType: 'NewActivity' }).then(({ data }) => {
    article.value = data?.list && data?.list.length ? data?.list : []
  })
}

const init = () => {
  queryParams.pageNum = 1
  getList()
}

onMounted(() => {
  getCmsArticle()
  init()
})
</script>
<template>
  <div class="banner">
    <div class="banner-block">
      <h1 class="banner-block-title">企业挂榜 服务机构揭榜</h1>
      <h2 class="banner-block-sub-title">需求为引导、企业为主体、市场为导向、产学研深度融合</h2>
      <el-button
        class="banner-block-btn"
        color="transparent"
        size="large"
        @click="createARequirement"
        >创建需求</el-button
      >
      <el-button class="banner-block-btn" color="transparent" size="large"
        >下载需求征集表</el-button
      >
    </div>
  </div>
  <div class="content">
    <div class="content-block">
      <div class="conent-block-search">
        <div class="seach-box">
          <el-input
            class="search-box-input"
            size="large"
            placeholder="输入关键词"
            v-model="queryParams.requirementName"
          />
          <el-button class="search-box-btn" type="primary" :icon="Search" @click="search"
            >搜索</el-button
          >
        </div>
        <!-- <div class="sift">
          <el-icon class="sift-icon" color="#1d5ede"><Filter /></el-icon>
          <span class="sift-text">筛选</span>
        </div> -->
      </div>
      <div class="conent-block-list">
        <div class="list-item" v-for="(item, index) in list" :key="index" @click="infoShow(item)">
          <div class="list-item-img">
            <img
              class="img"
              :src="item?.coverPhoto || '@/assets/images/center-list-bg.png'"
              alt=""
            />
          </div>
          <div class="list-item-info">
            <div class="list-item-info-title">
              <span class="title textOverflow">{{ item.requirementName }}</span>
              <el-tag :type="!getLeftDay(item).type ? 'info' : 'primary'" class="tag">{{
                getLeftDay(item).text
              }}</el-tag>
            </div>
            <div class="list-item-info-extra">
              <span class="extra-text">坐标:{{ (item.province || '') + (item.city || '') }}</span>
              <span class="extra-text"
                >领域:{{
                  dictStore.getDictItem('JLY_REQUIREMENTNAME_CODE', item.requirementArea)
                    ?.dictionaryName
                }}</span
              >
              <span class="extra-text"
                >预算:<span class="extra-budget">{{
                  item.requirementBudget != '面议'
                    ? item.requirementBudget + '万元'
                    : item.requirementBudget
                }}</span></span
              >
            </div>
            <div class="list-item-info-content">{{ item.requirementDescribe }}</div>
            <div class="list-item-info-status">
              <div class="list-item-info-status-line">
                <el-icon class="status-line-icon"><View /></el-icon>
                <span class="status-line-text">{{ item.hits || 0 }}</span>
              </div>
              <!-- <div class="list-info-info-status-line">
                <el-icon class="status-line-icon"><StarFilled /></el-icon>
                <span class="status-line-text">0</span>
              </div> -->
              <div class="list-item-info-status-line">
                <el-icon class="status-line-icon"><Opportunity /></el-icon>
                <span class="status-line-text">{{ item.scheme || 0 }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="list-pagination">
        <el-pagination
          class="pagination"
          size="small"
          layout="prev, pager, next"
          :background="true"
          :total="queryParams.total"
          @current-change="currentChange"
        />
      </div>
      <div class="conent-block-activity">
        <h3 class="activity-title"><span>最新活动</span></h3>
        <div class="activity-content" v-if="article.length">
          <div class="activity-img">
            <img
              :src="article[0].articlePicture || '@/assets/images/center-list-bg.png'"
              alt="最新活动"
            />
          </div>
          <div class="activity-text" v-html="article[0].articleContent" />
        </div>
      </div>
    </div>
  </div>
  <Create ref="createRef" @refresh="init" />
  <Info ref="infoRef" @refresh="init" />
</template>
<style lang="scss" scoped>
.banner {
  width: 100%;
  height: 440px;
  background: url('@/assets/images/require-bg.png') no-repeat;
  background-size: 100% 100%;
  .banner-block {
    padding-top: 78px;
    color: #fff;
    text-align: center;
    &-title {
      font-size: 46px;
      line-height: 48px;
    }
    &-sub-title {
      font-size: 21px;
      line-height: 44px;
      opacity: 0.8;
      margin-bottom: 18.52px;
    }
    &-btn {
      font-size: 16px;
      padding: 16px 32px;
      border-color: white;
      height: 48px;
    }
  }
}
.content {
  background: #f6faff;
  padding: 10px 0 24px;
  .content-block {
    width: 1200px;
    margin: 0 auto;
    .conent-block-search {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 10px;
      .seach-box {
        width: 750px;
        height: 39px;
        display: flex;
        .search-box-input {
          flex: 1;
          :deep(.el-input__wrapper) {
            border-radius: 0;
          }
        }
        .search-box-btn {
          width: 116px;
          height: 39px;
          line-height: 39px;
          border-radius: 0;
          font-size: 16px;
        }
      }
      .sift {
        margin-left: 41px;
        display: flex;
        align-items: center;
        cursor: pointer;
        .sift-icon {
          font-size: 14px;
        }
        .sift-text {
          font-size: 14px;
          color: #1d5ede;
          line-height: 22px;
          margin-left: 10px;
        }
      }
    }
    .conent-block-list {
      margin: 20px 0;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      .list-item {
        cursor: pointer;
        background: #fff;
        padding: 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        .list-item-img {
          width: 200px;
          height: 150px;
          background: #0f192b;
          display: flex;
          justify-content: center;
          align-items: center;
          overflow: hidden;
        }
        .list-item-info {
          flex: 1;
          .list-item-info-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            .title {
              font-size: 18px;
              line-height: 25px;
              width: 158px;
            }
            .tag {
              height: 32px;
              font-size: 14px;
              &.el-tag--primary {
                height: 32px;
                color: #1d5ede;
                font-size: 14px;
                background: rgba(29, 94, 222, 0.2);
              }
            }
          }
          .list-item-info-extra {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            .extra-text {
              line-height: 22px;
              font-size: 14px;
              color: #595b5e;
              .extra-budget {
                color: #ff7700;
              }
            }
          }
          .list-item-info-content {
            line-height: 22px;
            font-size: 14px;
            color: #595b5e;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            word-break: break-all;
            -webkit-line-clamp: 2; /* 限制为三行 */
            margin-bottom: 13px;
          }
          .list-item-info-status {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 24px;
            .list-item-info-status-line {
              display: flex;
              align-items: center;
              gap: 5px;
              .status-line-icon {
                font-size: 18px;
                color: #e9ebed;
              }
              .status-line-text {
                line-height: 22px;
                font-size: 14px;
                color: #595b5e;
              }
            }
          }
        }
      }
    }
    .list-pagination {
      display: flex;
      justify-content: center;
      :deep(.pagination) {
        --el-pagination-button-bg-color: #fff;
        li {
          border: 1px solid #ebedf0;
          &.is-active {
            border: 0;
          }
        }
      }
    }
    .conent-block-activity {
      padding: 30px 24px 24px;
      background: #fff;
      margin-top: 20px;
      text-align: center;
      margin-bottom: 10px;
      .activity-title {
        font-size: 28px;
        display: inline-block;
        margin: 0 auto 27px;
        position: relative;
        // 文字左下角一个#3E0EFD的正方形
        &::after {
          content: '';
          position: absolute;
          left: -20px;
          bottom: -10px; // 与标题底部对齐
          width: 12px; // 正方形宽度
          height: 12px; // 正方形高度
          background: #3e0efd; // 正方形颜色
        }
        //右上角一个#FD0E9E的三角形
        &::before {
          content: '';
          position: absolute;
          right: -20px; // 与标题底部对齐
          top: -15px; // 与标题底部对齐
          background: #fd0e9e; // 正方形颜色
          width: 24px;
          height: 20px;
          transform: scaleX(-1);
          clip-path: polygon(
            0 0,
            /* 左上角 */ 24px 0,
            /* 右上角 */ 24px 12px,
            /* 右上内部转折点 */ 12px 12px,
            /* 内部转折点 */ 12px 24px,
            /* 右下内部转折点 */ 0 24px,
            /* 左下角 */ 0 0 /* 闭合路径 */
          );
        }
      }
    }
    .activity-content {
      display: flex;
      gap: 22px;

      .activity-img {
        width: 566px;
        height: 318px;
        position: relative;
        img {
          width: 100%;
          height: 100%;
        }
        &::after {
          content: '';
          height: 100%;
          border-right: 1px solid #e9ebed;
          position: absolute;
          top: 0;
          right: -12px;
        }
      }
      .activity-text {
        flex: 1;
        line-height: 22px;
        font-size: 14px;
        color: #595b5e;
        text-align: left;
      }
    }
  }
}
.textOverflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
